<template>
	<view class="flex" style="width:100%;">
		<view style="border-radius: 10px;" id="video-container"></view>
	</view>
</template>

<script>
	// 引入西瓜播放器
	import Player from 'xgplayer';
	import FlvPlugin from "xgplayer-flv";
	import 'xgplayer/dist/index.min.css';
	import axios from 'axios';

	export default {
		name: 'XGPlayerFlvComponent',
		data() {
			return {
				player: null, // 存储播放器实例
			};
		},
		props: {
			rtsp: {
				type: String,
				require: true,
			},
			ws: {
				type: Object,
				require: true,
			},

		},
		mounted() {
			// 初始化西瓜播放器
			this.player = new Player({
				id: 'video-container', // 对应 HTML 容器的 ID
				url: 'http://192.168.67.89:7112/live?url=rtsp://192.168.67.89:8554/test', // 视频 URL
				//url: 'http://192.168.1.5:7112/live?url=rtsp://admin:@192.168.1.11:554/stream', // 视频 URL
				url: this.rtsp,
				//poster: 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg', // 视频封面
				volume: 0.6, // 默认音量
				playsinline: true, // 移动端内嵌播放
				autoplay: false, // 是否自动播放
				screenShot: {
					saveImg: false,
					quality: 0.92,
					type: 'image/png',
					format: '.png'
				},
				width: 900,
				height: 400,
				keyShortcut: 'on', // 启用快捷键
				playbackRate: [0.5, 1, 1.5, 2], // 倍速播放选项
				plugins: [FlvPlugin]
			});
			this.player.on('screenShot', (url) => {
				this.SendData(url)
			});
		},
		methods: {
			SendData(url) {
				this.ws.send({
					data: JSON.stringify({
						type: "saveimg",
						base64: {
							result: url
						}
					})
				});
			},
			
			/**
			 * 将base64图片数据转换为FormData并发送到后端
			 * @param {string} base64Data - base64编码的图片数据
			 * @param {string} filename - 文件名
			 */
			SendDataAsFormData(base64Data, filename = 'screenshot.png') {
				// 将base64数据转换为Blob对象
				function base64ToBlob(base64, mime) {
					const sliceSize = 1024;
					const byteChars = window.atob(base64.split(',')[1]);
					const byteArrays = [];
					
					for (let offset = 0; offset < byteChars.length; offset += sliceSize) {
						const slice = byteChars.slice(offset, offset + sliceSize);
						const byteNumbers = new Array(slice.length);
						for (let i = 0; i < slice.length; i++) {
							byteNumbers[i] = slice.charCodeAt(i);
						}
						const byteArray = new Uint8Array(byteNumbers);
						byteArrays.push(byteArray);
					}
					
					return new Blob(byteArrays, { type: mime });
				}
				
				// 提取MIME类型和base64数据
				const mimeMatch = base64Data.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
				const mime = mimeMatch && mimeMatch[1] ? mimeMatch[1] : 'image/png';
				
				// 转换base64到Blob
				const blob = base64ToBlob(base64Data, mime);
				
				// 创建FormData对象
				const formData = new FormData();
				formData.append('file', blob, filename);
				formData.append('type', 'screenshot');
				
				// 这里可以发送到后端API
				// 示例:
				// axios.post('/api/upload', formData, {
				//   headers: {
				//     'Content-Type': 'multipart/form-data'
				//   }
				// }).then(response => {
				//   console.log('上传成功', response);
				// }).catch(error => {
				//   console.error('上传失败', error);
				// });
				
				return formData;
			}
		},
		beforeDestroy() {
			// 销毁播放器，防止内存泄漏
			if (this.player) {
				this.player.destroy();
				this.player = null;
			}
		},
	};
</script>

<style scoped>
	#video-container {
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000;
	}

	.uni-stat--x {
		border-color: #99a9bf;
		background-color: rgb(245, 245, 245);
	}

	.flex {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
</style>